<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>参会企业</h2>
        </template>
      </PageTitle>
      <el-row
        :gutter="10"
        type="flex"
        justify="space-between"
        style="margin-top: 20px"
      >
        <el-col :span="20">
          <el-row :gutter="10" type="flex">
            <el-col :span="5">
              <el-select
                clearable
                placeholder="不限参会状态"
                v-model="selCompanyListQuery.audit"
                @change="handleSelectAuditChange"
              >
                <el-option
                  v-for="item in limitStatusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-select
                v-model="selCompanyListQuery.source"
                clearable
                @change="handleSelectSourceChange"
                placeholder="不限来源"
              >
                <el-option
                  v-for="item in sourceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="5">
              <el-select
                v-model="selCompanyListQuery.stick"
                clearable
                placeholder="不限置顶"
                @change="handleSelectAddTimeChange"
              >
                <el-option
                  v-for="item in sortList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex">
            <el-col :span="6">
              <el-select
                clearable
                v-model="selCompanyListQuery.keyType"
                placeholder="公司"
                @change="handleSelectCompanyChange"
              >
                <el-option
                  v-for="item in companyType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="18">
              <el-row type="flex">
                <el-input
                  @keyup.enter.native="handleSearch"
                  v-model="selCompanyListQuery.keyword"
                  placeholder="请输入搜索内容"
                ></el-input>
                <el-button type="primary" @click="handleSearch">
                  <i class="el-icon-search"></i>
                </el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        ref="table"
        v-loading="downloadLoading"
        ooltip-effect="dark"
        :data="selCompanyLists"
        style="margin-top: 20px"
        highlight-current-row
        @selection-change="handleSelectionChange"
        @row-click="handleRowClickChange"
      >
        <el-table-column type="selection" width="55" fixed />
        <el-table-column
          label="企业名称"
          align="center"
          width="180"
          prop="companyname"
          fixed
        >
          <template slot-scope="scope">
            <!-- {{ scope.row.personalLink }} -->
            <el-link type="primary" :href="scope.row.link">{{
              scope.row.companyname
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="prop" label="参会状态">
          <template slot-scope="scope">
            <el-tag :type="getAuditTagType(scope.row.audit)">
              {{ getAuditStatus(scope.row.audit) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="prop" label="数据来源">
          <template slot-scope="scope">
            {{ scope.row.source ? "后台添加" : "自主申请" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="prop" label="联系方式">
          <template slot-scope="scope">
            {{ scope.row.mobile }}({{ scope.row.contact }})
          </template>
        </el-table-column>
        <el-table-column
          label="添加日期"
          align="center"
          prop="addtime"
          width="170"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            {{ scope.row.addtime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="prop" label="微信直面">
          <template slot-scope="scope">
            {{ scope.row.utype ? "客服" : "" }}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="prop"
          label="操作"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handlePushPosition(scope.row.uid)"
              >参会职位</el-button
            >
            <el-button type="warning" size="small" @click="editClick(scope.row)"
              >审核</el-button
            >
            <el-button type="danger" size="small" @click="delBtn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" type="flex" style="margin-top: 20px">
        <el-col :span="8">
          <el-button type="primary" size="small" @click="addEnterprise"
            >新增</el-button
          >
          <!-- <el-button
            type="primary"
            size="small"
            @click="ParticipationDialog = true"
            >参会状态</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="enterpriseDialog = true"
            >名企推荐</el-button
          > -->
          <el-button type="warning" size="small" @click="examinePlClick"
            >批量审核</el-button
          >
          <el-button type="danger" size="small" @click="batchBtn"
            >批量删除</el-button
          >
        </el-col>
        <el-col :span="16">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: right"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <!-- 参会状态 -->
    <el-dialog
      title="将所选参会企业设置为"
      :visible.sync="ParticipationDialog"
      width="35%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="预定状态">
          <el-radio-group v-model="model">
            <el-radio :label="label">预定成功</el-radio>
            <el-radio :label="label">等待审核</el-radio>
            <el-radio :label="label">审核未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="10" type="flex" justify="center">
          <el-button @click="ParticipationDialog = false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 名企推荐 -->
    <el-dialog
      title="将所选参会企业设置为推荐企业"
      :visible.sync="enterpriseDialog"
      width="25%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名企推荐">
          <el-radio-group v-model="model">
            <el-radio :label="label">是</el-radio>
            <el-radio :label="label">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="10" type="flex" justify="end">
          <el-button @click="enterpriseDialog = false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 修改参会企业 -->
    <el-dialog
      title="设置参会状态"
      :visible.sync="editDialog"
      width="30%"
      @close="editClose"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="参会状态">
            <el-radio v-model="audit" :label="0">待审核</el-radio>
            <el-radio v-model="audit" :label="1">已通过</el-radio>
            <el-radio v-model="audit" :label="2">未通过</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="editClose">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 参会职位 -->
    <el-dialog
      title="参会职位"
      :visible.sync="particiPationDialog"
      width="width"
    >
      <div>
        <el-table
          :data="selJobFairJobByList"
          v-if="selJobFairJobByList && selJobFairJobByList.length > 0"
          style="width: 100%"
        >
          <el-table-column
            prop="jobname"
            label="职位名称"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="150"
          ></el-table-column>
          <el-table-column prop="addtime" label="添加时间">
            <template slot-scope="scope">
              {{ scope.row.addtime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="wage" label="薪资待遇">
            <template slot-scope="scope">
              {{ scope.row.minWage }}-{{ scope.row.maxWage }}元/月
            </template>
          </el-table-column>
        </el-table>
        <el-empty :image-size="200" description="暂无数据"></el-empty>
      </div>
      <div slot="footer">
        <el-button @click="particiPationDialog = false">取 消</el-button>
        <el-button type="primary" @click="particiPationDialog = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- Add batch audit dialog -->
    <el-dialog
      title="将所选企业设置为"
      :visible.sync="examineDialog"
      width="30%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="认证状态:">
          <!-- Only render when there are selected rows -->
          <el-radio-group
            v-if="selectedRows.length > 0"
            v-model="selectedRows[0].audit"
          >
            <el-radio :label="0">待审核</el-radio>
            <el-radio :label="1">已通过</el-radio>
            <el-radio :label="2">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item
          v-if="selectedRows.length > 0 && selectedRows[0].audit == 2"
          label="原因:"
        >
          <el-input
            v-model="selectedRows[0].reason"
            type="textarea"
            :rows="3"
            maxlength="30"
            show-word-limit
            placeholder="请填写不通过原因"
          >
          </el-input>
        </el-form-item> -->
        <!-- <el-form-item label="">
          <el-row :gutter="10" type="flex" justify="end">
            <el-button size="mini" @click="examineDialog = false">取消</el-button>
            <el-button type="primary" size="mini" @click="auditClick">确定</el-button>
          </el-row>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineDialog = false">取 消</el-button>
        <el-button type="primary" @click="auditClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selAttendCompanyListApi,
  delCompanyApi,
  updateCompanyApi,
  selJobFairJobByUidApi,
} from "@/api/application";
export default {
  data() {
    return {
      model: true,
      ParticipationDialog: false,
      enterpriseDialog: false,
      total: "",
      // 简历列表请求参数
      selCompanyListQuery: {
        page: 1,
        pagesize: 10,
        jobfairId: "",
        audit: "",
        keyType: "",
        keyword: "",
        orderKey: "",
        source: "",
        stick: "",
      },
      // 招聘会企业参会职位
      selJobFairJobByUidQuery: {
        jobFairId: "",
        uid: "",
      },
      // 限定状态
      limitStatusList: [
        { value: "", label: "不限参会状态" },
        { value: 0, label: "待审核" },
        { value: 1, label: "已通过" },
        { value: 2, label: "未通过" },
      ],
      // 不限制来源
      sourceList: [
        { value: "", label: "不限来源" },
        { value: 1, label: "后台添加" },
        { value: 0, label: "自主申请" },
      ],
      // 不限制添加时间
      addTimeList: [
        { value: "", label: "不限添加时间" },
        { value: 3, label: "三天内" },
        { value: 7, label: "一周内" },
        { value: 30, label: "一月内" },
        { value: 180, label: "半年内" },
        { value: 360, label: "一年内" },
      ],
      // 类型
      companyType: [
        { value: 1, label: "公司名" },
        { value: 2, label: "电话" },
      ],
      // 置顶列表
      sortList: [
        { value: "", label: "不限置顶" },
        { value: 0, label: "未置顶" },
        { value: 1, label: "置顶" },
      ],
      downloadLoading: true,
      // 修改企业
      ids: [],
      audit: "",
      editDialog: false,
      particiPationDialog: false,
      selCompanyLists: [],
      selectedRows: [],
      delCompanyList: [],
      selJobFairJobByList: [],
      examineDialog: false,
    };
  },
  created() {
    const savedQuery = localStorage.getItem("selCompanyListQuery");
    console.log(savedQuery);
    if (savedQuery) {
      this.selCompanyListQuery.jobfairId = JSON.parse(savedQuery);
      this.selJobFairJobByUidQuery.jobFairId = JSON.parse(savedQuery);
    }
    this.selAttendCompanyList();
  },
  methods: {
    // 跳转到参会职位
    async handlePushPosition(uid) {
      console.log(uid);
      this.selJobFairJobByUidQuery.uid = uid;
      const res = await selJobFairJobByUidApi(this.selJobFairJobByUidQuery);
      this.selJobFairJobByList = res.data;
      this.particiPationDialog = true;
      // this.$router.push({
      //   name: "meetingPositions",
      //   query: {
      //     uid:uid
      //   }
      // });
    },
    // 选增预定状态
    handleSelectAuditChange(value) {
      console.log(value);
      this.selAttendCompanyList();
    },
    // 不限来源
    handleSelectSourceChange(value) {
      console.log(value);
      this.selAttendCompanyList();
    },
    // 不限置顶
    handleSelectAddTimeChange(value) {
      console.log(value);
      this.selAttendCompanyList();
    },
    // 公司名
    handleSelectCompanyChange(value) {
      console.log(value);
      this.selAttendCompanyList();
    },
    // 搜索
    handleSearch() {
      this.selAttendCompanyList();
    },
    // 选择多少页码的时候
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.selCompanyListQuery.pagesize = pageSize;
      this.selAttendCompanyList();
    },
    // 选择当前页的时候
    handleCurrentChange(page) {
      console.log(page);
      this.selCompanyListQuery.page = page;
      this.selAttendCompanyList();
    },
    async selAttendCompanyList() {
      try {
        const res = await selAttendCompanyListApi(this.selCompanyListQuery);
        console.log(res);
        this.selCompanyLists = res.records;
        this.total = res.total;
        this.jobfairId = res.records[0].jobfairId;
      } catch {
      } finally {
        this.downloadLoading = false;
      }
    },
    // 新增企业
    addEnterprise() {
      // 存储 jobfairId 到 localStorage
      localStorage.setItem(
        "currentJobfairId",
        this.selCompanyListQuery.jobfairId
      );
      this.$router.push({
        name: "addEnterprise",
        query: {
          jobfairId: this.selCompanyListQuery.jobfairId,
        },
      });
    },
    // 修改企业
    editBtn() {
      this.$router.push({
        name: "editEnterprise",
      });
    },
    // 修改企业
    editClick(row) {
      console.log(row);
      this.editDialog = true;
      this.ids.push(row.id);
      this.audit = row.audit;
    },
    // 删除
    delBtn(id) {
      if (this.delCompanyList.includes(id)) {
        this.$message.warning("该企业已在删除列表中");
        return;
      }
      this.$confirm("此操作将永久删除该企业, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.delCompanyList.push(id);
          const res = await delCompanyApi(this.delCompanyList);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功");
            this.selAttendCompanyList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {});
    },
    // 点击批量删除
    batchBtn() {
      if (this.delCompanyList.length === 0) {
        this.$message.warning("请选择要删除的企业");
        return;
      }
      this.$confirm("此操作将永久删除该企业, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delCompanyApi(this.delCompanyList);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功");
            this.selAttendCompanyList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
          // this.delCompanyList = [];
        });
    },
    // 多选框删除
    handleSelectionChange(selection) {
      try {
        this.selectedRows = selection.map((item) => ({
          id: item.id,
          audit: item.audit || 0,
          reason: item.reason || "",
        }));
        this.delCompanyList = this.selectedRows.map((item) => item.id);
      } catch (error) {
        console.error("选择状态更新失败:", error);
      }
    },
    // 点击修改确定
    async btnOk() {
      try {
        const res = await updateCompanyApi(this.ids, this.audit);
        console.log(res);
        if (res.code === 1) {
          this.$message.success("设置成功");
          this.selAttendCompanyList();
        } else {
          this.$message.success("设置失败");
        }
      } catch {
        this.$message.error("设置失败");
      } finally {
        this.editDialog = false;
        this.ids = [];
      }
    },
    // 关闭修改弹窗
    editClose() {
      this.editDialog = false;
      this.ids = [];
    },
    // handleRowClickChange(selection) {
    //   console.log(selection);
    //   this.$refs.table.toggleRowSelection(selection); // 切换行选中状态
    // },
    // 获取审核状态标签类型
    getAuditTagType(audit) {
      switch (audit) {
        case 0:
          return "warning";
        case 1:
          return "success";
        case 2:
          return "danger";
        default:
          return "warning";
      }
    },
    // 获取审核状态文本
    getAuditStatus(audit) {
      switch (audit) {
        case 0:
          return "待审核";
        case 1:
          return "已通过";
        case 2:
          return "未通过";
        // default:
        //   return "待审核";
      }
    },
    // Batch audit click handler
    examinePlClick() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请先选择要审核的企业");
        return;
      }
      this.examineDialog = true;
    },
    // Audit confirmation handler
    async auditClick() {
      try {
        // Check if reason is required but missing
        // if (this.selectedRows[0].audit === 2 && !this.selectedRows[0].reason) {
        //   this.$message.error("请填写未通过原因");
        //   return;
        // }

        // Get audit and reason from first selection
        const { audit, reason } = this.selectedRows[0];
        console.log(this.selectedRows);
        

        // Sync all selected items with same audit and reason
        // this.selectedRows = this.selectedRows.map((row) => ({ 
        //   ...row,
        //   audit,
        // }));

        const res = await updateCompanyApi(
          this.selectedRows.map((row) => row.id),
          audit
        );

        if (res.code === 1) {
          this.$message.success("设置成功!");
          this.examineDialog = false;
          this.selAttendCompanyList();
        } else {
          this.$message.error("设置失败");
        }
      } catch (error) {
        this.$message.error("设置失败");
      }
    },
  },
};
</script>

<style scoped></style>
